import { Button } from "antd";
import React, { forwardRef } from "react";
import { TikTokOutlined, LoadingOutlined } from "@ant-design/icons";
import "./MikuButton.css";

type BaseButtonProps = React.ComponentProps<typeof Button>;

interface MikuButtonProps extends Omit<BaseButtonProps, 'variant' | 'size' | 'type'> {
  type?: "default" | "dashed"
  mikuVariant?: "primary" | "secondary" | "glow";
  mikuSize?: "small" | "medium" | "large";
  loadingText?: string;
} 

export const MikuButton = forwardRef<HTMLButtonElement, MikuButtonProps>(
  ({ 
    type = "default", 
    mikuVariant = "primary", 
    mikuSize = "medium", 
    children, 
    className = "", 
    loading = false,
    loadingText,
    ...restProps 
  }, ref) => {
    
    const buttonClassNames = [
      "miku-button",
      `miku-button--${mikuVariant}`,
      `miku-button--${mikuSize}`,
      loading ? "miku-button--loading" : "",
      className
    ].filter(Boolean).join(" ");

    return (
      <Button 
        ref={ref} 
        type={type} 
        className={buttonClassNames}
        loading={false} // 禁用 Ant Design 的默认 loading 行为
        {...restProps}
      >
        <span className="miku-button-content">
          {loading ? (
            // Loading 状态的内容
            <>
              <LoadingOutlined className="miku-loading-icon" />
              <span className="miku-text">{!loadingText ? "加载中..." : loadingText}</span>
            </>
          ) : (
            // 正常状态的内容
            <>
              <TikTokOutlined className="miku-icon" />
              <span className="miku-text">{children}</span>
              <div className="miku-sparkle-container">
                <div className="sparkle"></div>
                <div className="sparkle"></div>
                <div className="sparkle"></div>
                <div className="sparkle"></div>
              </div>
              <div className="miku-hover-effect"></div>
            </>
          )}
        </span>
      </Button>
    );
  }
);

MikuButton.displayName = "MikuButton";